import 'package:flutter/material.dart';
import 'package:wechat/constants.dart';
import '../constants.dart' show AppColors, AppStyles;
import '../model/conversation.dart';

class _ConversationItem extends StatelessWidget {
  const _ConversationItem({Key key, this.model})
      : assert(model != null),
        super(key: key);
  final Conversation model;
  @override
  Widget build(BuildContext context) {
    //根据图片得获取方式初始化头像事件
    Widget avatar;
    if (model.isAvatarFromNet()) {
      avatar = Image.network(model.avatar,
          width: Constants.ConversationAvatarSize,
          height: Constants.ConversationAvatarSize);
    } else {
      avatar = Image.asset(
        model.avatar,
        width: Constants.ConversationAvatarSize,
        height: Constants.ConversationAvatarSize,
      );
    }
    Widget avatarConstainer;
    if (model.unreadMsgCount > 0) {
      //未读消息角标
      Widget unreadMsgCountText = Container(
        width: Constants.UnreadMsgNotifyDotSize,
        height: Constants.UnreadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius:
              BorderRadius.circular(Constants.UnreadMsgNotifyDotSize / 2),
          color: Color(AppColors.NotifyDotBg),
        ),
        child: Text(
          model.unreadMsgCount.toString(),
          style: AppStyles.UnreadMsgCountDotStyle,
        ),
      );
//堆叠的组件
      avatarConstainer = Stack(
        //超出范围也正常显示
        overflow: Overflow.visible,
        children: [
          avatar,
          // 用这个包裹可以更改位置
          Positioned(right: -6.0, top: -6.0, child: unreadMsgCountText),
        ],
      );
    } else {
      avatarConstainer = avatar;
    }
//勿扰模式图标
    // Widget muteIcon = ;
    var _rightArea = <Widget>[
      Text(model.updateAt, style: AppStyles.DesStyle),
      SizedBox(height: 10.0)
    ];
    if (model.isMute) {
      _rightArea.add(Icon(
          IconData(0xe755, fontFamily: Constants.IconFontFamily),
          color: Colors.pink,
          size: 18.0));
    } else {
      _rightArea.add(Icon(
          IconData(0xe755, fontFamily: Constants.IconFontFamily),
          color: Colors.transparent,
          size: 18.0));
    }
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Color(AppColors.AppBarPopupMenuTextColor),
          border: Border(
              bottom: BorderSide(
            color: Color(AppColors.DesTextColor),
            width: 1,
          ))),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          avatarConstainer,
          SizedBox(width: 10),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(model.title, style: AppStyles.TitleStyle),
              Text(model.des, style: AppStyles.DesStyle),
            ],
          )),
          Column(
            children: _rightArea,
          )
        ],
      ),
    );
  }
}

class ConversationPage extends StatefulWidget {
  ConversationPage({Key key}) : super(key: key);

  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return _ConversationItem(model: mockConversations[index]);
      },
      itemCount: mockConversations.length,
    );
  }
}
